import { Directive, HostListener, Input, ElementRef } from '@angular/core';

/**
 * 一个 Angular 指令，用于在点击元素时展开其高度，并在鼠标离开一段时间后收缩高度。
 */
@Directive({
  selector: '[ElementToggleHeight]'
})
/**
 * 元素高度切换指令类，用于控制元素高度的展开和收缩。
 */
export class ElementToggleHeightDirective {
  /**
   * 自定义的展开高度，默认为 '280px'。
   */
  @Input() customHeight: string = '280px';
  /**
   * 鼠标离开后触发收缩的延迟时间，默认为 500 毫秒。
   */
  @Input() delayTime: number = 500; 
  /**
   * 用于存储 setTimeout 返回的 ID，以便后续清除定时器。
   */
  private timeoutId: ReturnType<typeof setTimeout> | null = null;

  /**
   * 构造函数，注入 ElementRef 以访问宿主元素。
   * @param el - 宿主元素的引用。
   */
  constructor(private el: ElementRef) {}

  /**
   * 点击事件处理函数，当点击宿主元素时，展开元素高度。
   * 如果定时器存在，则清除定时器。
   */
  @HostListener('click')
  onClick() {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
      this.timeoutId = null;
    }
    const element = this.el.nativeElement as HTMLElement;
    element.style.height = this.customHeight;
  }

  /**
   * 鼠标离开事件处理函数，当鼠标离开宿主元素时，设置一个延迟定时器。
   * 定时器触发后，收缩元素高度。
   */
  @HostListener('mouseleave')
  onMouseLeave() {
    this.timeoutId = setTimeout(() => {
      const element = this.el.nativeElement as HTMLElement;
      element.style.height = 'auto';
      element.style.height = element.scrollHeight + 'px';
      this.timeoutId = null;
    }, this.delayTime); // 使用输入的延迟时间
  }
}
